import {Tree} from 'antd';
import React from "react";
import "./css/OrderTree.css";
import GetChildOrdersMutation from "./mutation/GetChildOrdersMutation"
import OrderDetail from "./OrderDetail"
import Relay from "react-relay";

const TreeNode = Tree.TreeNode;

export default class OrderTree extends React.Component {
    componentDidMount() {
        this.requestdata();
    }

    state = {
        orders: [],
        expandedKeys: ['0-0-0', '0-0-1'],
        autoExpandParent: true,
        checkedKeys: ['0-0-0'],
        selectedKeys: [],
    }
    onExpand = (expandedKeys) => {
        console.log('onExpand', arguments);
        this.setState({
            expandedKeys,
            autoExpandParent: false,
        });
    }
    onSelect = (selectedKeys, info) => {
        this.setState({selectedKeys});
        this.requestdata(selectedKeys[0]);
    }

    requestdata() {
        Relay.Store.commitUpdate(
            new GetChildOrdersMutation({
                orderId: this.props.params.orderId || ''
            }),
            {
                onFailure: () => {
                },
                onSuccess: (response) => {
                    let errorCode = response.getChildOrders.getChildOrders.errorCode;
                    if (errorCode == 0) {
                        let orders = response.getChildOrders.getChildOrders.orders;
                        this.setState({
                            orders: orders,
                        });
                    }
                }
            }
        )
    }

    render() {
        const loop = data => data.map((item) => {
            if (item.children) {
                return (
                    <TreeNode key={item.key} title={item.title}>
                        {loop(item.children)}
                    </TreeNode>
                );
            }
            return <TreeNode key={item.key} title={item.title}/>;
        });
        return (
            <div className="div_context1">
                <p style={{
                    "fontSize": "16px",
                    "color": "#000",
                    "lineHeight": "32px",
                    "textAlign": "left",
                    "paddingTop": "20px",
                    "paddingBottom": "10px"
                }}>订单管理 > <span style={{
                    "fontSize": "16px",
                    "color": "#a0d468",
                    "lineHeight": "32px",
                    "textAlign": "left",
                    "paddingTop": "20px"
                }}>订单详情</span></p>
                <div className="order_tree clear">
                    <span style={{"fontSize": "16px", "color": "#a0d468"}}>订单关系</span>
                    <Tree showLine
                          defaultExpandAll={true}
                          onExpand={this.onExpand}
                          autoExpandParent={true}
                          checkedKeys={this.state.checkedKeys}
                          onSelect={this.onSelect}
                    >
                        {loop([{
                            "children": [{
                                "children": [{
                                    "title": "纱线",
                                    "key": "3"
                                }],
                                "title": "布料",
                                "key": "1"
                            },
                                {
                                    "title": "辅料",
                                    "key": "2"
                                }],
                            "title": "成衣",
                            "key": "0"
                        }])}
                    </Tree>
                </div>
                <div className="order_lists">
                    <div style={{"fontSize": "16px", "marginTop": "20px","borderBottom":"1px solid black"}}><span style={{"fontSize": "16px", "marginTop": "10px", "marginLeft": "20px"}}>订单详情</span></div>
                    <OrderDetail ref={"orderDetail"} orders={this.state.orders} type={this.state.selectedKeys[0]}
                                 requestdata={this.requestdata.bind(this)}/>
                </div>
            </div>
        );
    }
}
